import { createLogger } from "@/utils/logger"
import styled from "@emotion/styled"
import { useCallback } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"
import { TransactionDetailCard } from "./components/TransactionDetailCard"
import { TransactionDetailHeader } from "./components/TransactionDetailHeader"
import { TransactionStatus } from "./components/TransactionStatus"
import { TransactionDetail, TStatus } from "./types/transaction"
const logger = createLogger("TransactionStatusPage")

const Root = styled.div`
    font-family: "Gilroy";
    font-size: 12rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 50rem;
`

export default function TransactionStatusPage() {
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const getParam = useCallback(
        (key: string, defaultValue: string) => searchParams.get(key) || defaultValue,
        [searchParams],
    )

    const params: TransactionDetail = {
        type: getParam("type", "Deposit"),
        method: getParam("method", "GGash"),
        deposit: getParam("deposit", "200"),
        bonus: getParam("bonus", "100"),
        received: getParam("received", "300"),
        dateTime: getParam("datetime", "Oct 24, 2024 11:45 AM"),
        txid: getParam("txid", "80696272402621"),
        status: TStatus.Failed,
    }

    //?type=Deposit&method=GGash&deposit=₱200&bonus=₱100&received=₱300&datetime=Oct%2024,%202024%2011:45%20AM&txid=80696272402621
    return (
        <Root>
            <TransactionDetailHeader
                onClick={() => {
                    const returnUrl = getParam("returnUrl", "")
                    logger.debug("navigate,", returnUrl)
                    if (returnUrl) {
                        navigate("/login", { replace: true })
                    } else {
                        navigate(-1)
                    }
                }}
            />
            <TransactionStatus
                amount={params.deposit}
                status={params.status}
            />
            <TransactionDetailCard detail={params} />
        </Root>
    )
}
